<!--
 * @Description: What's this for

 * @Date: 2021-08-12 17:23:08

 * @LastEditTime: 2021-08-31 20:12:08
-->
<template>
  <VolBox :lazy="true" :model.sync="show" title="请选择跳转页面" :width="1000">
    <div class="tabs mb30">
      <div class="tab flex-center" :class="[value.type == tab.type ? 'tab-active' : '']"
        v-for="(tab, i) in tabs" :key="i" @click="changeTab(tab.type)">
        {{ tab.label }}
      </div>
    </div>

    <!-- 微页面 -->
    <template v-if="value.type == 'fixed'">
      <el-select v-model="value.id" placeholder="请选择要跳转的微页面" style="width: 250px">
        <el-option v-for="(page, i) in fixedPages" :key="i" :label="page.name" :value="page.id">
        </el-option>
      </el-select>
    </template>

    <!-- 自定义页面 -->
    <template v-if="value.type == 'custom'">
      <el-input v-model="value.id" placeholder="请输入自定义页面地址" style="width: 250px"></el-input>
    </template>

    <!-- 站外链接h5 -->
    <template v-if="value.type == 'webh5'">
      <el-input v-model="value.id" placeholder="请输入地址" style="width: 250px"></el-input>
    </template>

    <!-- 站外链接 -->
    <template v-if="value.type == 'link'">
      <el-cascader v-model="value.id" :options="PLProtyLIST" clearable :props="{
          checkStrictly: true,
          emitPath: false,
          label: 'typeName',
          value: 'id',
        }"></el-cascader>
    </template>

    <!-- 站外链接 -->
    <template v-if="value.type == 'designatedGoods' || value.type == 'specifiedProduct'">
      <div>
        <span>
          分类:
          <el-cascader v-model="value.valueId" :options="PLProtyLIST" @change="changeNameListDG"
            :props="{
              checkStrictly: true,
              multiple: true,
              emitPath: false,
              label: 'typeName',
              value: 'id',
            }"></el-cascader>
        </span>
      </div>
      <div style="margin-top: 20px">
        <!-- 指定商品 指定产品-->
        <span v-if="
            value.type == 'designatedGoods' || value.type == 'specifiedProduct'
          ">
          {{
            { designatedGoods: "商品:", specifiedProduct: "产品:" }[value.type]
          }}
          <el-select v-model="designatedGoods" placeholder="请选择" filterable multiple
            :popper-append-to-body="false" :reserve-keyword="false">
            <el-option v-for="(item, index) in designatedGoodsList" :key="index" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </span>
      </div>
    </template>
    <!-- 微信小程序链接 -->
    <template v-if="value.type == 'wechatImg'">
      <div>
        <span>
          appid:
          <el-input v-model="value.appid" placeholder="请输入" style="width: 250px"></el-input>
        </span>
      </div>
      <div style="margin-top: 20px">
        <span>
          path:
          <el-input v-model="value.path" placeholder="请输入" style="width: 250px"></el-input>
        </span>
      </div>
    </template>
    <template v-if="value.type == 'wineshoplink'">
      <el-select v-model="value.id" filterable placeholder="请选择">
        <el-option v-for="item in WineshopArr" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <!-- 指定教练 -->
    <template v-if="value.type == 'coach'">
      教练:
      <el-select v-model="value.id" filterable placeholder="请选择">
        <el-option v-for="item in coachArr" :key="item.value" :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
    <!-- 拨打电话 -->
    <template v-if="value.type == 'phone'">
      <span>
        电话:
        <el-input v-model="value.id" placeholder="请输入" style="width: 250px"></el-input>
      </span>
    </template>
    <!-- 地址 -->
    <template v-if="value.type == 'address'">
      <div>
        地址:
        <el-input v-model="value.id" placeholder="请输入" style="width: 534px"></el-input>
      </div>
      <div class="mart10">
        经度:
        <el-input v-model="longitude" placeholder="请输入" style="width: 250px"></el-input>
        纬度:
        <el-input v-model="latitude" placeholder="请输入" style="width: 250px"></el-input>
      </div>
    </template>
    <!-- 二级页跳转 -->
    <template v-if="value.type == 'twoPageJump'">
      <el-select v-model="value.id" placeholder="请选择二级页面" style="width: 250px">
        <el-option v-for="(page, i) in mallDataList" :key="i" :label="page.name" :value="page.id">
        </el-option>
      </el-select>
    </template>
    <!-- 文本跳转 -->
    <template v-if="value.type == 'textPageJump'">
      <el-select v-model="value.id" placeholder="请选择富文本" style="width: 250px">
        <el-option v-for="(page, i) in textDataList" :key="i" :label="page.title" :value="page.id">
        </el-option>
      </el-select>
    </template>
    <!-- designatedGoods -->
    <div slot="footer">
      <Button type="default" @click="pj_Id">关闭</Button>
      <!-- <Button type="default" @click="submit">确认</Button> -->
    </div>
  </VolBox>
</template>

<script>
import { mapMutations, mapGetters } from "vuex";
import VolBox from "@/components/basic/VolBox.vue";
export default {
  components: {
    VolBox,
  },
  props: {
    tabs: {
      type: Array,
      default: [],
    },
    itemPage: {//装修page页数据
      type: Object,
      default: {},
    },
    mallDataList:{
      type: Array,
      default: [],
    },
    textDataList:{
      type: Array,
      default: [],
    }
  },
  name: "JumpDialog",
  inject: ["value"],
  data() {
    return {
      show: false,
      valueId: "",
      arrMax: [],
      PLProtyLIST: [],
      WineshopArr: [],
      designatedGoods: "",
      designatedGoodsList: [],
      fixedPages: [
        {
          id: "/pages/index/index",
          name: "首页",
          type: "fixed",
        },
        {
          id: "/pages/index/cart",
          name: "购物车",
          type: "fixed",
        },
        {
          id: "/pages/index/user",
          name: "我的",
          type: "fixed",
        },
        {
          id: "/pages/index/category",
          name: "商品分类",
          type: "fixed",
        },
      ],
      coachArr: [],
      longitude: "",
      latitude: "",
      valueName: "",
    };
  },
  computed: {
    customPages() {
      return this.project.pages;
    },
    pageName() {
      return this.getList(this.value);
    },
  },
  watch: {
    itemPage: {
      handler() {
        if (this.itemPage.type) {
          this.getList(this.itemPage);
        }
      },
      immediate: true,
    },
    show: {
      handler() {
        if (!this.show) {
          this.getList(this.value);
        } else {
          this.$emit("close", "");
        }
      },
      immediate: true,
    },
  },
  methods: {
    getList(itemObj) {
      let page = { name: "" };
      switch (itemObj.type) {
        case "fixed":
          page = this.fixedPages.find((page) => page.id == itemObj.id);
          break;
        case "twoPageJump":
          page = this.mallDataList.find((v) =>{ return v.id == itemObj.id});
          break;
        case "custom":
          page = { name: itemObj.id };
          break;
        case "link":
          if (typeof itemObj.id == "string") {
            let a = itemObj.id.split("=");
            let index = Number(a[length - 1]);
            this.changeID(index);
          } else {
            this.changeID(itemObj.id);
          }
          break;
        case "wineshoplink":
          if (typeof itemObj.id == "string") {
            let b = itemObj.id.split("=");
            let index = Number(b[length - 1]);
            this.wineshopName(index);
          } else {
            this.wineshopName(itemObj.id);
          }
          break;
        case "webh5":
          page = { name: "链接:" + itemObj.id };
          break;
        case "designatedGoods":
          page = { name: "商品" };
          break;
        case "specifiedProduct":
          page = { name: "产品" };
          break;
        case "wechatImg":
          page = { name: itemObj.appid };
          break;
        case "phone":
          page = { name: "电话:" + itemObj.id || "" };
          break;
        case "coach":
          page = { name: "教练:" + itemObj.id || "" };
          break;
        case "address":
          page = { name: "地址:" + itemObj.id || "" };
          break;
        case "textPageJump":
          page = { name: "富文本:" + itemObj.id || "" };
          break;

      }
      if (
        itemObj.type &&
        itemObj.type != "link" &&
        itemObj.type != "wineshoplink"
      ) {
        this.$emit("close", page.name);
      }
    },
    GetProductType() {
      let that = this;
      this.http.get("/api/producttypes/GetProductType").then((res) => {
        this.PLProtyLIST = res.data;
        function arrReduce(someArr) {
          for (let i = 0; i < someArr.length; i++) {
            if (someArr[i].children) {
              arrReduce(someArr[i].children);
              that.arrMax.push(someArr[i]);
            } else {
              that.arrMax.push(someArr[i]);
            }
          }
        }
        arrReduce(res.data);
      });
    },
    //酒店列表
    WineshopList() {
      let param = {
        order: "desc",
        page: 1,
        rows: 10000,
        sort: "id",
        wheres: `[]`,
      };
      this.http.post("/api/Hotels/getPageData", param).then((res) => {
        if (res.rows.length != 0) {
          let arr = [];
          res.rows.forEach((i) => {
            let obj = {
              label: i.hotel_Name,
              value: i.hotelid,
              key: i.hotelid,
              ...i,
            };
            arr.push(obj);
          });
          this.WineshopArr.push(...arr);
        }
      });
    },
    open(value) {
      this.show = true;
      this.value = value;
      if (this.value.type == "link") {
        this.value.id = Number(
          this.value.id.split("/pages/goods/list?id=")[
            this.value.id.split("/pages/goods/list?id=").length - 1
          ]
        );
      }
      if (this.value.type == "wineshoplink") {
        this.value.id = Number(
          this.value.id.split("/pages/goods/hoteldetail?hotelId=")[
            this.value.id.split("/pages/goods/hoteldetail?hotelId=").length - 1
          ]
        );
      }
      if (this.value.type == "address") {
        this.longitude = this.value.longitude;
        this.latitude = this.value.latitude;
      }
      if (
        this.value.type == "designatedGoods" ||
        this.value.type == "specifiedProduct"
      ) {
        if (this.value.id.indexOf("id=") != -1) {
          this.designatedGoods = this.value.id.split("id=")[1].split(",");
          if (this.designatedGoods[0] == "") {
            this.designatedGoods = [];
          }
          this.changeNameListDG(this.value.valueId);
        }
      }
      if (this.value.type == "textPageJump") {
        this.value.id = Number(
          this.value.id.split("/pages/public/richtext?id=")[
            this.value.id.split("/pages/public/richtext?id=").length - 1
          ]
        );
      }
    },
    pj_Id() {
      this.show = false;
      if (this.value.type == "textPageJump") {
        this.value.id = `/pages/public/richtext?id=${this.value.id}`;
      }
      if (this.value.type == "link") {
        this.value.id = `/pages/goods/list?id=${this.value.id}`;
      }
      if (this.value.type == "wineshoplink") {
        this.value.id = `/pages/goods/hoteldetail?hotelId=${this.value.id}`;
      }
      if (this.value.type == "wechatImg") {
        this.value.id = "微信跳转";
        delete this.value.valueId;
      } else {
        delete this.value.appid;
        delete this.value.path;
      }
      if (
        this.value.type == "designatedGoods" ||
        this.value.type == "specifiedProduct"
      ) {
        this.value.id =
          "/pages/goods/list?type=designatedGoods&id=" +
          this.designatedGoods.join();
      }
      if (this.value.type == "address") {
        this.$set(this.value, "longitude", this.longitude);
        this.$set(this.value, "latitude", this.latitude);
      } else {
        delete this.value.latitude;
        delete this.value.longitude;
      }
    },
    changeTab(v) {
      this.$set(this.value, "type", v);
      this.$set(this.value, "id", "");
      if (v == "designatedGoods" || v == "specifiedProduct") {
        this.designatedGoods = "";
        this.changeNameListDG(this.value.valueId);
      } else {
        this.designatedGoods = "";
        this.value.valueId = [];
      }
    },
    setPageId(id) {
      this.$set(this.value, "id", id);
    },
    changeNameListDG(val) {
      if (val.length > 0) {
        this.designatedGoodsList = [];
        // 之前接口/api/producttypes/GetGood
        const api =
          this.value.type == "designatedGoods"
            ? "/api/producttypes/GetdistriGood"
            : "/api/producttypes/GetdistriGood";
        this.http
          .get(api, {
            typeid: val.toString(),
            distributorld: sessionStorage.getItem("distributorId"),
          })
          .then((res) => {
            res.data.forEach((i) => {
              let obj = { key: i.id, value: i.id, label: i.spare1 };
              this.designatedGoodsList.push(obj);
            });
          });
      }
    },
    changeID(index) {
      this.http
        .get("/api/producttypes/GetTypeParent", { id: index })
        .then((res) => {
          this.$emit("close", res);
        });
    },
    wineshopName(index) {
      let param = {
        order: "desc",
        page: 1,
        rows: 10000,
        sort: "id",
        wheres: `[{\"name\":\"hotelid\",\"value\":\"${index}\",\"displayType\":\"text\"}]`,
      };
      this.http.post("/api/Hotels/getPageData", param).then((res) => {
        if (res.rows.length != 0) {
          this.$emit("close", res.rows[0].hotel_Name);
        }
      });
    },
  },
  mounted() {
    this.GetProductType();
    this.WineshopList();
  },
};
</script>

<style lang="scss" scoped>
.tabs {
  display: flex;

  .tab {
    width: 100px;
    height: 30px;
    color: #979797;
    border: solid 1px #ebedf0;
    cursor: pointer;
  }

  .tab-active {
    color: #155bd4;
    border: solid 1px #155bd4;
    background: #e0edff;
  }
}
.el-select .el-select-dropdown {
  transform: translateX(-5px);
}
.mart10 {
  margin-top: 10px;
}
</style>
